<template>
  <div class="form-wrapper">
    <p>字符串的值为:<b>{{ str }}</b></p>
    <!-- input事件回调中,$event就是input事件对象,$event.target就是input这个DOM,target.value就是当前输入框的输入值 -->
    <input
      :value="str"
      @input="str = $event.target.value"
     />
    <br />
    <!-- 表单双向绑定 -->
    <h2>{{ typeof str }}</h2>
    <input placeholder="您的银行账户有多少钱" v-model.number.trim="str" />
    <br />
    <!-- input和textarea使用同样的双向绑定 -->
    <textarea v-model="str"></textarea>

    <form>
        <input placeholder="用户名" />
        <br />
        <input placeholder="密码" />
        <br />
        <label>
            <input type="checkbox"
              v-model="hasRead"
             />
            我已阅读<a href="/">《用户协议》</a>
        </label>
        <br />
        <button>提交</button>
        <p>{{ hasRead ? '勾选已阅读,账号被盗后,不要找我们麻烦,都是用户的责任':'不勾不行' }}</p>
    </form>
    <div class="list">
      <p>{{ animalList.join('、') }}</p>
      <label>
          <input type="checkbox" v-model="animalList" value="驴" />马
      </label>
      <label>
          <input type="checkbox" v-model="animalList" value="奶牛" />奶牛
      </label>
      <label>
          <input type="checkbox" v-model="animalList" value="龙" />龙
      </label>
    </div>
    <div class="list">
      <p>结婚后,想要什么宝宝:</p>
      <p>您选择了{{ gender }}</p>
      <input id="male" type="radio" v-model="gender" value="男孩" />
      <label for="male">
        男
      </label>
      <input id="female" type="radio" v-model="gender"  value="女孩" />
      <label for="female">
        女
      </label>
    </div>
    <select v-model="address" multiple>
      <option value="" disabled>你想在哪里工作</option>
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
      <option value="sz">深圳</option>
    </select>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        str:'我是默认值',
        hasRead:false,//是否已读
        animalList:[],//喜欢的动物列表
        gender:'',//性别
        address:'',//地址
      }
    }
  }
</script>

<style lang="sass" scoped>
.form-wrapper input,textarea
  border: 1px solid #ccc
textarea
  border-width: 3px
p
  color: red
  b
    font-size: 20px
</style>
